/**
* 描述：企业管理
*/
<style lang="scss" scoped>
  @import 'src/styles/company/index';
  @import 'index';
  .content {
    width: 98%;
    height: inherit;
    margin-left: 1%;
  }
</style>
<template>
  <div class="content">
    <Tabs ref="tabs" @on-click="clickTab">
      <TabPane label="企业信息">
        <div v-show="!isUpdate">
          <div class="resumeCenter-block resumeCenter-userInfo">
            <img :src="`/api/pub/image/${baseForm.logo}`" alt="头像" class="touxiang"/>
            <div class="center">
              <div class="name">{{baseForm.fullName}}</div>
              <div class="clear"></div>
              <div class="info">
                <i>{{baseForm.name}}</i>
                <i>丨</i>
                <i>{{baseForm.size | companyScaleSize}}</i>
                <i>丨</i>
                <i>{{baseForm.cityId | cityAndType}}</i>
              </div>
            </div>
            <div class="resumeCenter-block-modiftBtns" style="width:18px;">
              <i class="iconUCenter iconUCenter_modify" @click="isUpdate=true"></i>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="resumeCenter-block">
            <div class="resumeCenter-block-tit">基础信息</div>
            <div class="clear"></div>
            <div class="resumeCenter-main">
              <span class="wth50">所属行业：{{baseForm.industry | industryFilter}}</span>
              <span class="wth50">公司经纬度：{{baseForm.lngLat}}</span>
              <span class="wth50">公司地址：{{baseForm.address}}</span>
              <span class="wth50">员工福利：{{baseForm.talentWelfare}}</span>
              <span class="wth50">企业主页：{{baseForm.url}}</span>
            </div>
          </div>
          <div class="resumeCenter-block">
            <div class="resumeCenter-block-tit">企业诱惑</div>
            <div class="clear"></div>
            <div class="resumeCenter-main">
              <p class="wth100" v-for="item in temptationList">{{item}}</p>
            </div>
          </div>
          <div class="resumeCenter-block">
            <div class="resumeCenter-block-tit">企业简介</div>
            <div class="clear"></div>
            <div class="resumeCenter-main">
              <p class="wth100" v-for="item in descriptionList">{{item}}</p>
            </div>
          </div>
        </div>
        <Form ref="baseForm" :model="baseForm" :rules="baseFormRule" :label-width="200" class="main-add-1 formNoRadius" style="float: left" v-show="isUpdate">
          <FormItem label="企业logo：">
            <el-upload
              style="float: left;"
              name="image"
              class="avatar-uploader logo-uploader"
              action="/api/pub/image"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-error="handleAvatarError">
              <img v-if="baseForm.logo" :src="`/api/pub/image/${baseForm.logo}`" alt="公司logo" width="98" height="98" style="display: block;">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span style="float: left;color: #999;margin-left: 10px;">*点击图片可重新上传 <br>*上传图片尺寸为100*100px最佳，不可大于100k</span>
            <div class="clear"></div>
          </FormItem>
          <FormItem label="企业名称：" prop="fullName">
            <i-input v-model="baseForm.fullName" placeholder="企业名称" :maxlength="50" style="width: 500px" class="formNoRadius"></i-input>
          </FormItem>
          <FormItem label="公司简称：" prop="name">
            <i-input v-model="baseForm.name" placeholder="公司简称" :maxlength="50" style="width: 500px" class="formNoRadius"></i-input>
          </FormItem>
          <FormItem label="企业营业证编号：" prop="businessCode">
            <i-input v-model="baseForm.businessCode" placeholder="企业营业证编号" :maxlength="100"></i-input>
          </FormItem>
          <FormItem label="企业规模：" prop="size">
            <Select v-model="baseForm.size" placeholder="企业规模" clearable filterable>
              <template>
                <i-option v-for="item in companyScaleList" :value="item.id" :key="item.id" :label="item.label"></i-option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="所属行业：" prop="industry">
            <Select v-model="baseForm.industry" placeholder="企业所属行业" clearable filterable>
              <template>
                <i-option v-for="item in industryList" :value="item.id" :key="item.id">{{item.label}}</i-option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="所在城市：" prop="cityId">
            <Select v-model="baseForm.cityId" placeholder="所在城市" clearable filterable
                    @on-change="changeCity(baseForm.cityId)" :disabled="true">
              <template>
                <i-option v-for="item in cityList" :value="item.id" :key="item.id">{{item.name}}</i-option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="所在区县：" prop="districtId">
            <Select v-model="baseForm.districtId" placeholder="所在区县" clearable filterable>
              <template>
                <i-option v-for="item in districtList" :value="item.id" :key="item.id">{{item.name}}</i-option>
              </template>
            </Select>
          </FormItem>
          <FormItem label="公司地址：" prop="address">
            <i-input v-model="baseForm.address" placeholder="请输入公司详细地址"></i-input>
          </FormItem>
          <FormItem label="公司经纬度：" prop="lngLat"  style="width: 100%">
            <!--<i-input v-model="baseForm.lngLat" placeholder="公司经纬度" :disabled="true">-->
              <!--<Button slot="append" icon="ios-search" @click="mapShow=true"></Button>-->
            <!--</i-input>-->
            <el-input v-model="baseForm.lngLat" placeholder="公司经纬度" :disabled="true">
              <template slot="append"><i class="el-icon-location-outline" style="cursor: pointer" @click="mapShow=true"></i></template>
            </el-input>
            <!--<Input>-->
            <!--<Button slot="append" icon="ios-search" @click="mapShow=true"></Button>-->
            <!--</Input>-->
          </FormItem>
          <FormItem label="员工福利：" prop="talentWelfare">
            <i-input v-model="baseForm.talentWelfare" placeholder="企业员工福利" :maxlength="100"></i-input>
          </FormItem>
          <FormItem label="企业主页：" prop="url">
            <i-input v-model="baseForm.url" placeholder="企业主页网址" :maxlength="100"></i-input>
          </FormItem>
          <FormItem label="企业诱惑：" prop="temptation">
            <i-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="baseForm.temptation" placeholder="企业诱惑" :maxlength="100"></i-input>
          </FormItem>
          <FormItem label="企业简介：" prop="description">
            <i-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}" v-model="baseForm.description" placeholder="企业简介" :maxlength="100"></i-input>
          </FormItem>
          <FormItem>
            <Button type="ghost" @click="infoReset()" style="margin-right: 18px;padding:8px 0;width:130px;text-align: center;">取消</Button>
            <Button type="primary" :loading="addLoading" @click="addOrUpdate()" style="padding:8px 0;width:130px;text-align: center;">提交修改</Button>
          </FormItem>
        </Form>
        <!--<div style="float: right;padding: 2px 10px;margin-top: -55px;"><Button type="primary" :loading="addLoading" @click="submitApproval">提交审核</Button></div>-->
      </TabPane>
      <TabPane label="企业申请记录">
        <!--搜索条部分-->
        <!--<div class="search-bar">-->
          <!--<div class="oneImput fl wth160px">-->
            <!--<el-input v-model="searchData.name" placeholder="名称" size="small"></el-input>-->
          <!--</div>-->
          <!--<div class="oneImput fr">-->
            <!--<el-button type="primary" class="search-button fl" icon="search" @click="search" size="small">搜索</el-button>-->
            <!--<div class="clear"></div>-->
          <!--</div>-->
          <!--<div class="clear"></div>-->
        <!--</div>-->

        <!--table部分-->
        <div class="table-content">
          <el-table
            size="mini"
            :data="list"
            v-loading="loading"
            :element-loading-text="loadingText"
            highlight-current-row
            border
            style="width: 100%">
            <el-table-column
              prop="createdAt"
              label="审核时间"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="description"
              label="审批消息"
              align="center"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="verifyStatus"
              align="center"
              label="企业认证状态">
              <template slot-scope="scope">
                {{ scope.row.state | examineState }}
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <hy-page v-show="pageShow"
                   :current-page="searchData.page"
                   :page-size="searchData.limit"
                   :total-element="totalElement"
                   @current-change="currentChange"></hy-page>
        </div>
      </TabPane>
    </Tabs>
    <!-- 弹出层 -->
    <map-modal :title="`选择经纬度`" :cityCode="baseForm.cityId" :styles="{width: '666px'}" transition="zoomDown"
               v-on:getLngLat="getLngLat"v-model="mapShow"></map-modal>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  import list from '@/js/mixins/list';
  import { queryList, queryCount, updateFun, submitApproval, industry } from '@/service/company/enterpriseInfo/enterpriseInfoMService';
  import { district, districtByCityId, companyScale } from '@/service/company/selectService/selectMService';
  import mapModal from '@/components/common/modal/mapModal';
  export default {
    mixins: [list],
    components: {
      mapModal
    },
    computed: {
      ...mapState([
        'currentCompanyInfo'
      ])
    },
    async created () {
      this.getAllCityList();
      this.getIndustryList();
      if (!this.currentCompanyInfo.name) await this.getCurrentComp();
      this.baseForm = Object.assign({}, this.currentCompanyInfo);
      if (this.baseForm.description) {
        let description = this.baseForm.description.replace(/\n/g, ';');
        this.descriptionList = description.split(';');
      }
      if (this.baseForm.temptation) {
        let temptation = this.baseForm.temptation.replace(/\n/g, ';');
        this.temptationList = temptation.split(';');
      }
      this.baseForm.lngLat = this.baseForm.longitude + ',' + this.baseForm.latitude;
      this.changeCity(this.baseForm.cityId);
    },
    data () {
      return {
        isUpdate: false,
        mapShow: false,
        loading: true,
        searchData: {},
        baseForm: {},
        addLoading: false,
        baseFormRule: {
          fullName: [
            {required: true, message: '企业全称不能为空', trigger: 'blur change'}
          ],
          name: [
            {required: true, message: '企业简称不能为空', trigger: 'blur change'}
          ],
          businessCode: [
            {required: true, message: '企业营业证编号不能为空', trigger: 'blur change'}
          ],
          size: [
            {required: true, type: 'number', message: '企业人数规模不能为空', trigger: 'blur change'}
          ],
          industry: [
            {required: true, type: 'number', message: '行业领域不能为空', trigger: 'blur change'}
          ],
          cityId: [
            {required: true, type: 'number', message: '城市不能为空', trigger: 'blur change'}
          ],
          districtId: [
            {required: true, type: 'number', message: '地区不能为空', trigger: 'blur change'}
          ],
          address: [
            {required: true, message: '详细地址不能为空', trigger: 'blur change'}
          ]
        },
        cityList: [],
        districtList: [],
        uploadFileName: '',
        accept: ['image/jpeg', 'image/png'],
        industryList: [],
        companyScaleList: [],
        locationArray: [],
        descriptionList: [],
        temptationList: []
      };
    },
    methods: {
      ...mapActions([
        'getCurrentComp'
      ]),
      async _getList () {
        this.loading = true;
        let result = await queryList(this.searchData);
        let temp = await queryCount(this.searchData);
        if (!result.data.length) result.data = null;
        this.list = result.data || [];
        console.log(this.list);
        this.totalElement = temp.data || 0;
        this.loading = false;
      },
      // 提交新增修改
      addOrUpdate () {
        this.$refs.baseForm.validate(async (valid) => {
          if (valid) {
            try {
              this.addLoading = true;
              await updateFun({id: this.baseForm.id}, this.baseForm);
              this.addLoading = false;
              await this.getCurrentComp();
              await submitApproval();
              this.$Notice.success({title: '修改成功'});
              this.infoReset();
            } catch (e) {
              this.addLoading = false;
            }
          }
        });
      },
      // 重置
      infoReset () {
        this.baseForm = Object.assign({}, this.currentCompanyInfo);
        this.changeCity(this.baseForm.cityId);
        if (this.baseForm.description) {
          let description = this.baseForm.description.replace(/\n/g, ';');
          this.descriptionList = description.split(';');
        }
        if (this.baseForm.temptation) {
          let temptation = this.baseForm.temptation.replace(/\n/g, ';');
          this.temptationList = temptation.split(';');
        }
        this.isUpdate = false;
      },
      // 获取全国城市集合
      async getAllCityList () {
        let result = await district({type: 10});
        this.cityList = result.data;
      },
      // 根据城市查询区
      async changeCity (code) {
        this.districtList = [];
        if (!code) return;
        let result = await districtByCityId({cityId: code});
        this.districtList = result.data;
      },
      // 图片上传失败
      handleAvatarError () {
        this.$Notice.error({title: '上传失败，请稍后再试'});
      },
      // 图片上传之前
      beforeAvatarUpload (file) {
        const isJPG = this.accept.indexOf(file.type) > -1;
        const isLt2M = file.size / 1024 < 100;
        if (!isJPG) {
          this.$Notice.warning({
            title: '上传图片格式错误',
            desc: '上传图片格式只能为jpg, jpeg, png'
          });
        }
        if (!isLt2M) {
          this.$Notice.warning({
            title: '上传图片过大',
            desc: '上传图片大小不能超过2M'
          });
        }
        return isJPG && isLt2M;
      },
      // 上传成功
      handleAvatarSuccess (res, file) {
        this.baseForm.logo = res.data.ossKey;
        this.$Notice.success({title: '上传成功'});
      },
      // 提交审核
      submitApproval () {
        this.$confirm('确定提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await submitApproval();
          this.$Notice.success({title: '提交成功！'});
        }).catch(() => {
        });
      },
      // 获取行业字典
      async getIndustryList () {
        let result = await industry();
        this.industryList = result.data;
        let result1 = await companyScale();
        this.companyScaleList = result1.data;
        this._hyTool.setStore('companyScaleListData', this.companyScaleList);
      },
      clickTab (val) {
        if (val === 1) {
          this.search();
        }
      },
      getLngLat (getLngLat) {
        if (getLngLat.lng) {
          this.baseForm.longitude = getLngLat.lng;
          this.baseForm.latitude = getLngLat.lat;
          this.baseForm.lngLat = this.baseForm.longitude + ',' + this.baseForm.latitude;
        } else {
          this.baseForm.lngLat = null;
        }
      }
    }
  };
</script>
